<template>
  <div class="invite-hot">
    <vw-actionsheet :model="isFilterSearch" @handler="handlerActionSheet">
      <filterSearch ref="filter" :optionData="filterData"></filterSearch>
    </vw-actionsheet>
    <!--我修改的部分，放置的页面有问题-->
    <div v-if="isSearch" class="home-search-wrapper">
      <home-search :searchValue="searchValue"></home-search>
    </div>
    <!---->
    <div class="job-header primary">
      <div class="job-header__search" @click="searchOnClick">
        <i class="icon ion-ios-search-strong"></i>
        <span class="txt">请输入职位/地址/关键字</span>
      </div>
    </div>
    <div class="job-content">
      <div class="job-banner" style="height: 5.5rem;">
        <vw-swipe >
          <vw-swipe-item>
            <a href="">
              <img src="../../assets/banner.png">
            </a>
          </vw-swipe-item>
          <vw-swipe-item>
            <a href="">
              <img src="../../assets/2.jpg">
            </a>
          </vw-swipe-item>
          <vw-swipe-item>
            <a href="">
              <img src="../../assets/3.jpg">
            </a>
          </vw-swipe-item>
        </vw-swipe>
      </div>
      <div class="job-list">
        <div class="job-list-item" v-for="job in jobs">
          <job-split></job-split>
          <job-info :job="job"></job-info>
        </div>
      </div>
    </div>
  </div>
</template>
<script type="text/ecmascript-6">
  import { mapState } from 'vuex';
  import { jobInfo, jobSplit } from 'components';
  import HomeSearch from './HomeSearch';
  import { filterSearch } from 'components/filterSearch';
  import { ajax } from 'common';

  export default {

    components: {
      jobInfo,
      jobSplit,
      filterSearch,
      HomeSearch
    },

    created() {
      this.$store.dispatch('GET_JOBS');
      ajax.get(`${window.AppConf.apiHost}/getFilterSearchData`)
        .then(resp => {
          this.filterData = resp.result;
        });
    },

    computed: {
      ...mapState({
        jobs: state => state.job.jobs
      })
    },

    data() {
      return {
        filterData: [],
        isFilterSearch: false,
        searchValue: [],
        isSearch: false
      };
    },

    methods: {
      searchOnClick() {
        this.isFilterSearch = !this.isFilterSearch;
      },
      handlerActionSheet(arg) {
        this.searchValue = this.$refs.filter.getValue();
        console.log(this.searchValue);
        this.isFilterSearch = false;
        this.switchIsSearch();
        console.log(this.isSearch);
      },
      switchIsSearch() {
        this.isSearch = !this.isSearch;
      }
    }

  };
</script>
<style lang="scss" type="text/scss">
// 修改的部分
  .home-search-wrapper{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    margin-top: 40px;
    z-index: 99;
  }
// 修改

  .invite-hot img {
    max-width: 100%;
    vertical-align: top;
  }

  .job-header {
    position: absolute;
    left: 0;
    top: 0;
    padding: 0 15px;
    width: 100%;
    height: 44px;
    z-index: 500;
    display: flex;
    align-items: center;
    color: #FFF;
    box-sizing: border-box;

    &.primary {
      background-color: #1ac788;
      border-bottom: 1px solid rgba(255,255,255,.1)
    }

    &__search {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 30px;
      border: 1px solid rgba(255,255,255,.8);
      border-radius: 5px;

      .icon {
        font-size: 18px;
      }

      .txt {
        margin-left: 10px;
        font-size: 12px;
      }
    }

    & ~ .job-content {
      top: 44px;
      overflow-y: auto;
    }
  }

  .job-banner {
    text-align: center;
  }

  .job-content {
    width: 100%;
    position: absolute;
    bottom: 50px;
  }
</style>
